<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            width: 150px;
            height: 50px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <form action="">
        账号<input type="text" name="" id="username"><br>
        密码<input type="password" name="" id="password"><br>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">

        </svg>
        <a href="" id="reset">看不清，换一张</a>
        <button id="login">提交</button>
    </form>

    <script src="../../../JS基础/utils.js"></script>
    <script>
        let login = document.getElementById('login');
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        let reset = document.getElementById('reset');
        let svg = document.getElementById('svg');
        let str = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm';

        function render() {
            svg.innerHTML = '';
            for (let i = 0; i < 10; i++) {
                svg.innerHTML += `<line x1="${createRandom(150)}" y1="${createRandom(50)}" x2="${createRandom(150)}" y2="${createRandom(50)}" stroke="rgb(${createRandom(255)},${createRandom(255)},${createRandom(255)})" stroke-width="${createRandom(1, 3)}"/>`
            }
            svg.innerHTML += `<text x="10" y="20" fill="red" style="font-size: 30px;" rotate='45'>
                ${str[createRandom(str.length - 1)]}
                ${str[createRandom(str.length - 1)]}
                ${str[createRandom(str.length - 1)]}
                ${str[createRandom(str.length - 1)]}
                \</text>`
        }
        render()

        reset.onclick = function (event) {
            event.preventDefault();
            render()
        }

        login.onclick = function (event) {
            event.preventDefault();
            let users = JSON.parse(localStorage.getItem('users'));
            let result = users.filter((item) => item.name == username.value && item.pwd == password.value)
            if (result.length > 0) {//用户存在
                alert('登陆成功！')
            } else {
                alert('账号或密码输入错误')
            }
            password.value = '';
            username.value = '';
        }


    </script>

</body>

</html>